<template>
  <ele-modal
    :width="750"
    :visible="visible"
    :confirm-loading="loading"
    title="盘点报告"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    :footer="null"
  >
    <div>
      <div>
        <div class="margin-bottom-15">盘点概况</div>
        <vxe-table align="center" :data="tableData">
          <vxe-column field="title" title="" />
          <vxe-column field="count" title="应盘" />
          <vxe-column field="num" title="实盘" />
          <vxe-column field="loss" title="盘亏" />
          <vxe-column field="profit" title="盘盈" />
        </vxe-table>
      </div>
      <div>
        <div class="margin-y-30">盘亏货品</div>
        <vxe-grid v-bind="gridOptions1" />
      </div>
      <!-- <div>
        <div class="margin-y-30">盘盈货品</div>
        <vxe-grid v-bind="gridOptions2" />
      </div> -->

      <div class="flex justify-end">
        <a-space class="margin-y-30">
          <!-- <a-button type="primary" class="ele-btn-icon" @click="baoyi()"
            ><span>生成报溢单</span></a-button
          > -->
          <a-button type="primary" class="ele-btn-icon" @click="baoshun()"
            ><span>生成报损单</span></a-button
          >
          <a-button type="primary" class="ele-btn-icon" @click="lossExport()"
            ><span>导出盘亏货品</span></a-button
          >
          <!-- <a-button type="primary" class="ele-btn-icon" @click="profitExport()"
            ><span>导出盘盈货品</span></a-button
          > -->
        </a-space>
      </div>
    </div>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import { useRouter } from 'vue-router';
  import { Form } from 'ant-design-vue';
  import { emailReg, phoneReg, identityReg } from 'ele-admin-pro';
  import { daochuFn } from '@/utils/daochu.js';
  import {
    report_base,
    report_loss,
    report_profit,
    loss_receipts,
    profit_receipts
  } from '@/api/jewelry/receipts_store_check';

  const { push } = useRouter();
  // 表格列配置
  const useForm = Form.useForm;

  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean,
    reportCode: String
  });

  const emit = defineEmits(['update:visible']);

  // 提交状态
  const loading = ref(false);
  const tableData = ref([]);

  onMounted(() => {
    //console.log('props.reportCode', props.reportCode);
    report_base({ code: props.reportCode }).then((res) => {
			tableData.value = [{
				title:'数量',
				count:res.data.count,
				num:res.data.num,
				loss:res.data.loss,
				profit:res.data.profit
			}];
			console.log("tableData.value", tableData.value)
		});
    report_loss({ code: props.reportCode }).then((res) => {
		gridOptions1.data = res.data;
	});
    report_profit({ code: props.reportCode }).then((res) => {
		gridOptions2.data = res.data;
	});
  });
  const baoyi = ()=>{
	  profit_receipts({ code: props.reportCode }).then((res) => {
        message.success(res.msg);
      })
      .catch((e) => {
        message.error(e);
      });
  };
  const baoshun = ()=>{
	  loss_receipts({ code: props.reportCode }).then((res) => {
        message.success(res.msg);
      })
      .catch((e) => {
        message.error(e);
      });
  };
  const lossExport = ()=>{
	  let data = {
		  url:'warehouse/receipts_store_check/loss_export',
		  params:{ code: props.reportCode },
		  filename:'盘亏货品'
	  }
	  daochuFn(data);
  };
  const profitExport = ()=>{
	  let data = {
		  url:'warehouse/receipts_store_check/profit_export',
		  params:{ code: props.reportCode },
		  filename:'盘盈货品'
	  }
	  daochuFn(data);
  };

  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };

  const gridOptions1 = reactive({
    border: true,
    rowConfig: {
      keyField: 'id'
    },
    columnConfig: {
      resizable: true
    },
    /* pagerConfig: {
      pageSize: 10
    }, */
    editConfig: {
      trigger: 'click',
      mode: 'cell'
    },
    columns: [
      { field: 'bar_code', title: '条码', fixed: 'left', width: '100' },
      { field: 'name', title: '货品名称', width: '150' },
      /* { field: 'class_code_name', title: '货品大类', width: '150' }, */
      { field: 'subclass_code_name', title: '货品小类', width: '150' },
	  { field: 'piece_weight', title: '总件重', width: '150' },
	  { field: 'gold_weight', title: '净金重', width: '150' },
      /* { field: 'quality_code_name', title: '货品成色', width: '150' },
      { field: 'supplier_code_name', title: '供应商名称', width: '150' },
      { field: 'gem_category_code_name', title: '宝石类别', width: '150' },
      { field: 'classes_code_name', title: '货品品类', width: '150' }, */
      { field: 'sticker_price', title: '标签价', width: '150' },
      /* { field: 'cost', title: '成本价', width: '150' }, */
    ],
    data: []
  });
  const gridOptions2 = reactive({
    border: true,
    rowConfig: {
      keyField: 'id'
    },
    columnConfig: {
      resizable: true
    },
    /* pagerConfig: {
      pageSize: 10
    }, */
    editConfig: {
      trigger: 'click',
      mode: 'cell'
    },
    columns: [
      { field: 'bar_code', title: '条码', fixed: 'left', width: '100' },
      { field: 'name', title: '货品名称', width: '150' },
      /* { field: 'class_code_name', title: '货品大类', width: '150' }, */
      { field: 'subclass_code_name', title: '货品小类', width: '150' },
      { field: 'piece_weight', title: '总件重', width: '150' },
      { field: 'gold_weight', title: '净金重', width: '150' },
      /* { field: 'quality_code_name', title: '货品成色', width: '150' },
      { field: 'supplier_code_name', title: '供应商名称', width: '150' },
      { field: 'gem_category_code_name', title: '宝石类别', width: '150' },
      { field: 'classes_code_name', title: '货品品类', width: '150' }, */
      { field: 'sticker_price', title: '标签价', width: '150' },
      /* { field: 'cost', title: '成本价', width: '150' }, */
    ],
    data: []
  });
</script>
<style scoped></style>
